<template>
  <div class="tree-wrapper">
    <div
      v-for="item in treeList"
      :key="item.id"
      class="tree-item"
    >
      <div class="tree-title">{{ item.title }}</div>
      <el-tree
        ref="tree"
        :props="{ label: 'title' }"
        :data="item.children"
        show-checkbox
        :default-expand-all="true"
        node-key="id"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'PermissionTree',

  props: {
    treeList: {
      type: Array,
      required: true
    },
    perms: {
      type: Array,
      default: () => []
    }
  },

  methods: {
    updateCheckedKeys(perms) {
      if (this.$refs.tree && perms) {
        this.$refs.tree.forEach((tree, index) => {
          if (perms[index]) {
            tree.setCheckedKeys(perms[index])
          }
        })
      }
    }
  }
}
</script>

  <style lang="scss" scoped>
  .tree-wrapper {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    .tree-item {
      flex: 1;
      border-right: 1px solid #e4e7ec;
      padding: 0 4px;
      text-align: center;

      &:last-child {
        border-right: none;
      }

      .tree-title {
        background: #f5f7fa;
        text-align: center;
        padding: 10px 0;
        margin-bottom: 12px;
      }
    }
  }
  </style>
